<template>
    <div class="album_container font_m" @click.once="verifyPotenceHandler">
        <!-- 顶部 -->
        <div class="album_header flex bx">
            <img v-lazy="'/src/static/images/smallLogo.webp'" style="width: 102px;height: 36px;"
                @click="$router.push('/')" />
            <van-button type="warning" round class="btn">打开APP</van-button>
        </div>
        <!-- 专辑图 -->
        <div class="album_area bx">
            <div class="album_area_cont flex">
                <!-- 左图 -->
                <div style="position: relative;">
                    <img class="album_lt_img" v-if="ablumDetail.cover" v-lazy="BASE_URL_IMG + ablumDetail.cover" />
                    <p style="position: absolute;bottom: 5px;left: 3px;align-items: center;" class="flex">
                        <van-icon name="audio" size="16" />
                        <span class="font_min" style="font-weight: bold;">1331.02万</span>
                    </p>
                </div>
                <!-- 夹缝图 -->
                <img class="ablum_m_img"
                    src="//s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/listen_pic_album@3x_d18f4f7.png"
                    alt="" />
                <!-- 右侧 -->
                <div class="album_right flex">
                    <!-- 标题 -->
                    <div>{{ ablumDetail.title }}</div>
                    <!-- 中 -->
                    <div class="flex middle">
                        <img class="album_right_m_img" v-if="anchorInfo.logo" v-lazy="BASE_URL_IMG + anchorInfo.logo" alt=""
                            style="margin-right: 10px; width:20px; height: 20px;">
                        <span style="font-size: 12px;color: #bbbcc4;">{{ anchorInfo.nickname }}</span>
                    </div>
                    <!-- 下 -->
                    <div class="middle_btm">已订阅{{ filterNum(fansNum) }}人</div>
                </div>
            </div>
        </div>
        <!-- 内容简介 -->
        <div class="album_intro" v-if="ablumDetail.shortIntro">
            <div class="album_intro_title">【内容简介】</div>
            <div class="album_intro_cont">
                {{ ablumDetail.shortIntro.slice(5) }}
            </div>
            <!-- 蒙版 -->
            <div class="comment_more flex" v-if="true">
                <div class="flex"
                    style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);flex-direction: column;align-items: center;">
                    <van-icon name="arrow-down" />
                    <span style="margin-top: 30px;">查看更多评论</span>
                </div>
            </div>
        </div>
        <!-- 动画按钮 -->
        <div class="album_big">
            <van-button type="danger" class="album_big_btn font_max">打开App, 完整收听</van-button>
        </div>
        <!-- 节目 -->
        <div class="album_program">
            <div class="album_title flex">
                <div class="font_max weight">节目({{ 10 }})</div>
                <div class="font_m">
                    <van-icon name="sort" />
                    <span> 切换顺序</span>
                </div>
            </div>
            <!-- 每一项 -->
            <div class="album_item flex" v-for="item in programList" :key="item.id">
                <div class="flex" style="align-items: center;">
                    <span class="font_max"><van-icon name="play-circle-o" size="30" /></span>
                    <span class="album_item_left font_m moreV">{{ item.trackInfo.title }}</span>
                </div>
                <span class="font_m"><van-icon name="down" /></span>
            </div>
            <div class="album_more">加载更多 <van-icon name="arrow-down" /></div>
        </div>
        <!-- 主播信息 -->
        <div class="album_info">
            <div class="font_max weight info_title">主播信息</div>
            <div class="info_top flex">
                <div class="info_top_left">
                    <img class="info_top_left_img" v-if="anchorInfo.logo" v-lazy="BASE_URL_IMG + anchorInfo.logo" />
                    <div class="info_top_left_small_img font_min">{{ 'V13' }}</div>
                </div>
                <div class="info_top_m flex">
                    <p style="font-size: 16px;">{{ anchorInfo.nickname }}</p>
                    <p class="font_min one_line font_txt">{{ anchorInfo.personalSignature }}</p>
                    <p class="font_min"><van-icon name="friends" /><span style="margin-left: 10px;">{{ 4219 }}</span></p>
                </div>
                <div class="info_top_rh font_m flex" style="color: red;">
                    <span><van-icon name="friends-o" size="30" /></span>
                    <span style="margin-top: 3px;">加关注</span>
                </div>
            </div>
            <div class="info_btm flex">
                <div class="info_btm_item flex" v-for="item in saveAlbumDetailInfoList" :key="item.id">
                    <div style="width: fit-content;height: fit-content;position: relative;">
                        <img class="info_btm_item_img" v-lazy="BASE_URL_IMG + item.albumInfo.cover" alt="">
                        <div class="font_min info_btm_item_icon"><span class="iconfont icon-bofang"
                                style="color: #000;background-color: #fff;border-radius: 50%;"></span><span
                                style="margin-left: 5px;">6364</span></div>
                    </div>
                    <span class="info_btm_text moreV">{{ item.albumInfo.title }}</span>
                </div>
            </div>
        </div>
        <!-- 用户评论 : 活动的样式类移出隐藏 over  comment_more -->
        <div class="album_comment">
            <div class="font_max weight" style="margin-bottom: 10px;">用户评论</div>
            <div class="over">
                <!-- 每一项 -->
                <div class="album_comment_item flex" v-for="item in commentList" :key="item.id">
                    <img class="album_comment_item_img" v-if="item.smallHeader" v-lazy="item.smallHeader" />
                    <div class="album_comment_item_gt flex">
                        <div class="font_m" style="color: #9d9d9d;">{{ item.nickname }}</div>
                        <div class="font_m moreV" v-html="item.content"></div>
                        <div class="font_min flex" style="justify-content: space-between;">
                            <div>
                                <span>回复&nbsp;&nbsp;</span>
                                <span style="color: #9d9d9d;">{{ handlerDate(item.createdAt) }}</span>
                            </div>
                            <div>{{ filterNum(item.likes) }}&nbsp;&nbsp;<van-icon name="good-job-o" color="red" size="16" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment_more flex" v-if="true">
                <div class="flex"
                    style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);flex-direction: column;align-items: center;">
                    <van-icon name="arrow-down" />
                    <span style="margin-top: 30px;">查看更多评论</span>
                </div>
            </div>
        </div>
        <!-- 相似专辑 -->
        <div class="similarity">
            <div class="font_max weight">相似专辑</div>
            <div class="info_btm flex">
                <div class="info_btm_item flex" v-for="item in similarAlbumList" :key="item.uid">
                    <div style="width: fit-content;height: fit-content;position: relative;">
                        <img class="info_btm_item_img" v-lazy="BASE_URL_IMG + item.coverPath" alt="">
                        <div class="font_min info_btm_item_icon"><span class="iconfont icon-bofang"
                                style="color: #000;background-color: #fff;border-radius: 50%;"></span><span
                                style="margin-left: 5px;color: red;">{{ filterNum(item.playCount) }}</span></div>
                    </div>
                    <div class="info_btm_text moreV">{{ item.title }}</div>
                </div>
            </div>
            <div style="width: 100%;text-align: center;">
                <van-button round class="exchange font_min" icon="replay">换一批</van-button>
            </div>
        </div>
        <!-- 猜你喜欢 ：待传数据 -->
        <div style="padding: 15px;">
            <div class="tit font_max weight" style="margin-bottom: 15px;">猜你喜欢</div>
            <w-card :list="guessLikeList"></w-card>
        </div>
        <!-- 页脚 -->
        <WFooter></WFooter>
    </div>
</template>

<script lang="ts" setup>
import WCard from "@/components/w-card/index.vue";
import WFooter from "@/components/w-footer/index.vue";
import detailRequest from "@/api/detail";
import homeRequest from "@/api/home";
import reminder from "@/utils/reminder";
import { onMounted, reactive, ref } from "vue";
import { ALNUM_INFO, TRACK_DETAIL_INFOS, USERINFO, ALBUM_BRIEF_DETAIL_INFOS, COMMENT_LIST, SIMILARITY_ALBUM_LISE } from "@/type/resType/detailResType";
import { ALBUMS } from "@/type/resType/homeResType";
import filterNum from "@/tools/filterNum";
import { useRouter } from "vue-router"
import actionToken from "@/tools/actionToken";
import useUserStore from "@/store/user";

// 接收从路由映射到组件的albumId
const props = defineProps<{
    albumId: String
}>();
const BASE_URL_IMG: string = import.meta.env.VITE_IMG_BASE_URL;//图片的基础路径
const ablumDetail = reactive<ALNUM_INFO>({} as ALNUM_INFO);
const programList = ref<TRACK_DETAIL_INFOS>([]);//节目列表
const anchorInfo = reactive<USERINFO>({} as USERINFO);
const fansNum = ref<number>(0);//粉丝数
const saveAlbumDetailInfoList = ref<ALBUM_BRIEF_DETAIL_INFOS>([]);//专辑简介详细信息列表
const commentList = ref<COMMENT_LIST>([]);//评论列表
const similarAlbumList = ref<SIMILARITY_ALBUM_LISE>([]);//相似专辑
const guessLikeList = ref<ALBUMS>([]);//猜你喜欢列表数据
const router = useRouter();
const userStore = useUserStore();

// 当用户点击时校验权限
const verifyPotenceHandler = () => {
    let token = actionToken.getToken();
    let id = userStore.state.id;
    if(token && id) return;
    reminder("请您先登录哦",false);
    router.push("/login");
}

// 定义一个方法加工时间戳
const handlerDate = (time: number) => {
    let date = new Date(time);
    let yy = date.getFullYear();
    let mm = (date.getMonth() + 1 + '').padStart(2, '0');
    let ss = (date.getDate() + '').padStart(2, '0');
    return `${yy}-${mm}-${ss}`
}

// 根据路由跳转携带过来的专辑id来发请求获取专辑数据
async function forGetAlbumData() {
    try {
        let { data: { albumDetailInfo: { albumInfo } } } = await detailRequest.getDetail(+props.albumId);
        Object.assign(ablumDetail, albumInfo);
        // 获取主播信息
        forGetAnchorInfo(albumInfo.anchorId);
        forGetAnchorThreeItem(albumInfo.anchorId);
        // 获取相似专辑列表
        forGetSimilarityAlbumList(albumInfo.title);
    } catch (error) {
        reminder("网络连接异常");
    }
}
// 获取节目列表
const forGetProgramList = async () => {
    try {
        let { data: { trackDetailInfos } } = await detailRequest.getProgram(+props.albumId);
        programList.value = trackDetailInfos
    } catch (error) {
        reminder("网络连接失败");
    }
}
// 获取主播信息
const forGetAnchorInfo = async (anchorId: number) => {
    try {
        let { data: { statCountInfo: { followerCount }, userInfo } } = await detailRequest.getAnchorInfo(anchorId);
        Object.assign(anchorInfo, userInfo)
        fansNum.value = followerCount;
    } catch (error) {
        reminder("网络连接失败");
    }
}
// 获取主播信息下的三个item：专辑简介详细信息
const forGetAnchorThreeItem = async (anchorId: number) => {
    try {
        let result = await detailRequest.getAncItemList(anchorId);
        saveAlbumDetailInfoList.value = result.data.albumBriefDetailInfos;
    } catch (error) {
        reminder("网络连接失败");
    }
}
// 发请求获取用户评论列表数据
const forGetCommentList = async () => {
    try {
        let { data: { comments } } = await detailRequest.getUserCommentList(+props.albumId);
        comments.map(item => {
            if (!item.smallHeader.includes("http")) {
                item.smallHeader = BASE_URL_IMG + item.smallHeader;
            }
            return item;
        })
        commentList.value = comments;
    } catch (error) {
        reminder("网络连接失败");
    }
}
// 获取相似专辑数据
const forGetSimilarityAlbumList = async (kw: string) => {
    try {
        let { data: { album: { docs } } } = await detailRequest.getSimilarityAlbumList(kw);
        similarAlbumList.value = docs;
    } catch (error) {
        reminder("网络连接失败");
    }
}
// 获取猜你喜欢列表数据
const forGetGuessLikeList = async () => {
    try {
        let { data: { albums } } = await homeRequest.getHotList(2, 5);
        guessLikeList.value = albums
    } catch (error) {
        reminder("网络连接失败");
    }
}

onMounted(() => {
    [forGetAlbumData, forGetProgramList, forGetCommentList, forGetGuessLikeList].forEach(item => item());
    // // 获取专辑信息
    // forGetAlbumData();
    // // 获取节目列表
    // forGetProgramList();
    // // 获取用户评论列表数据
    // forGetCommentList();
    // // 获取猜你喜欢列表数据
    // forGetGuessLikeList();
})

</script>

<script lang="ts">
export default {
    name: "Album",
};
</script>

<style scoped lang="less">
.moreV {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*设置对齐模式*/
    -webkit-line-clamp: 2;
    /*设置多行的行数，示例为2行*/
}

.font_max {
    font-size: 18px;
}

.font_m {
    font-size: 14px;
}

.font_min {
    font-size: 12px;
}

.flex {
    display: flex;
}

.bx {
    box-sizing: border-box;
}

.weight {
    font-weight: bold;
}

.one_line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.over {
    height: 200px;
    overflow: hidden;
    margin-bottom: 50px;
}

// 主要内容
.album_container {
    .album_header {
        width: 100%;
        padding: 10px 8px;
        background-color: #4c4d4f;
        justify-content: space-between;

        .btn {
            height: 30px;
            background-color: #f86442;
            border: 0;
            font-size: 14px;
        }
    }

    // 专辑
    .album_area {
        width: 100%;
        padding: 30px 20px 20px;
        background-color: rgb(72, 74, 96, .1);
        color: #fff;
        position: relative;

        .album_area_cont {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;

            .album_lt_img {
                width: 95px;
                height: 95px;
            }

            .ablum_m_img {
                width: 24px;
                height: 95px;
            }

            .album_right {
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;

                .middle {
                    align-items: center;

                    img {
                        border-radius: 50%;
                    }
                }

                .middle_btm {
                    border-top: 2px solid #606275;
                    padding: 8px 0px;
                    font-size: 12px;
                }
            }
        }
    }

    .album_area::after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: rgb(32, 26, 15);
        background: radial-gradient(circle, rgba(32, 26, 15, 0.5) 0%, rgba(124, 96, 41, 0.5) 50%, rgba(194, 18, 95, 0) 100%);
    }

    // 内容简介
    .album_intro {
        padding: 15px 15px 0px;
        position: relative;

        // 蒙版
        .comment_more {
            flex-direction: column;
            align-items: center;
            color: #fe7b5c;
            height: 150px;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: -77px;
            background: rgb(255, 255, 255);
            background: linear-gradient(0deg, rgba(255, 255, 255, 1) 25%, rgba(250, 247, 247, 0.8520658263305322) 100%);
        }
    }

    .album_big {
        width: 100%;
        margin-top: 77px;
        text-align: center;

        @keyframes pulse {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.08);
            }
        }

        .album_big_btn {
            width: 60%;
            border-radius: 22px;
            background-image: linear-gradient(-269deg, #ff8b70 2%, #f86442 99%);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
            border: 0;
            animation: pulse 0.4s linear 0s infinite alternate;
        }
    }

    .album_program {
        padding: 15px 15px 0px;

        .album_title {
            justify-content: space-between;
            align-items: center;
        }

        .album_item {
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;

            .album_item_left {
                margin-left: 10px;
                line-height: 1.5;
            }
        }

        .album_more {
            width: 100%;
            padding: 17px 0px;
            font-weight: bold;
            font-size: 16px;
            color: #f86442;
            text-align: center;
        }
    }

    // 主播信息
    .album_info {
        margin: 10px 0px;
        padding: 15px;

        .info_title {
            margin-bottom: 10px;
        }

        .info_top {
            width: 100%;
            justify-content: space-between;
            align-items: center;

            .info_top_left {
                align-items: center;
                position: relative;
                width: 54px;

                .info_top_left_img {
                    width: 54px;
                    height: 54px;
                    border-radius: 20px;
                }

                .info_top_left_small_img {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    color: #fff;
                    text-align: center;
                    background-color: #36d6fb;
                    width: fit-content;
                    height: fit-content;
                    padding: 1px;
                    border-radius: 10px;
                }
            }

            .info_top_m {
                flex-direction: column;

                .font_txt {
                    max-width: 220px;
                }
            }

            .info_top_rh {
                width: fit-content;
                flex-direction: column;
                align-items: center;
            }

        }

        // 
        .info_btm {
            padding: 27px 10px 0px 0px;
            justify-content: space-between;
            flex-wrap: wrap;

            .info_btm_item {
                flex-direction: column;

                // width: fit-content;
                .info_btm_item_img {
                    width: 91px;
                    height: 91px;
                }

                .info_btm_item_icon {
                    font-size: 12px !important;
                    position: absolute;
                    bottom: 10px;
                    left: 4px;
                    color: #fff;
                }

                .info_btm_text {
                    width: 91px;
                    height: 40px;
                    text-align: center;
                }
            }
        }
    }

    // 用户评论
    .album_comment {
        padding: 15px;
        margin-bottom: 15px;
        position: relative;

        .album_comment_item {
            height: 100px;
            margin: 10px 0px;

            .album_comment_item_img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .album_comment_item_gt {
                flex-direction: column;
                justify-content: space-evenly;
            }
        }

        .comment_more {
            flex-direction: column;
            align-items: center;
            color: #fe7b5c;
            height: 180px;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: -30px;
            background: rgb(255, 255, 255);
            background: linear-gradient(0deg, rgba(255, 255, 255, 1) 25%, rgba(250, 247, 247, 0.8520658263305322) 100%);
        }
    }

    // 相似专辑
    .similarity {
        padding: 15px;

        .info_btm {
            padding-top: 15px;
            justify-content: space-between;
            flex-wrap: wrap;

            .info_btm_item {
                flex-direction: column;
                margin-bottom: 10px;

                // width: fit-content;
                .info_btm_item_img {
                    width: 91px;
                    height: 91px;
                }

                .info_btm_item_icon {
                    font-size: 12px !important;
                    position: absolute;
                    bottom: 10px;
                    left: 4px;
                    color: #fff;
                }

                .info_btm_text {
                    width: 91px;
                    height: 40px;
                    text-align: center;
                }
            }
        }

        .exchange {
            color: #fff;
            background-color: #f24821;
            margin: 10px 0px 2px;
            padding: 7px 10px;
            width: 80px;
            height: 32px;
        }
    }
}
</style>